/**
 * Created by yyl on 2018/11/21.
 *
 * 只暴露success方法出去。只需要定义success方法和fileList。返回list.
 * 例如
 *
 *    <ImageUpload
        fileList={fileList}
        success={this.handleChange}>
        {uploadButton}
        </ImageUpload>
 * 此组件删除时也调用传入的success方法。因为都是操作数据。
 *
 * list的数据结构为{uid:"---",url:""}
 * 允许自带属性，比如编辑时数据中带有id或其他主键标识。uid为必须有的。可以转换下数据把主键标识赋给uid
 * 如果已有列表，则需要将数据转为此结构
 */
import React, {Component} from 'react';
import Immutable from 'immutable'
import {Upload, Modal} from 'antd';
import CommonInfo from 'common-info'
import ModalTip from 'modalTip'
const maxSize = 1024*20;//单位k

export default class ImageUpload extends Component{
    constructor(props){
        super(props)
        this.state = {
            //弹窗
            previewVisible: false,
            previewImage: ''
        };
    }
    static defaultProps={
        name:'file',
        action:"",
        fileList:Immutable.List(),
        listType:"picture-card"
    }


    render(){
        const { previewVisible, previewImage } = this.state;
        let action = api_host + this.props.action
         return <div>
                    <Upload
                    name={this.props.name}
                    listType={this.props.listType}
                    action={action}
                    fileList={this.props.fileList.toJS()}
                    beforeUpload={this._beforeUpload}
                    onPreview={this.handlePreview}
                    onSuccess={this._onSuccess}
                    onError={this._onError}
                    onRemove={this._onRemove}
                    >
                        {this.props.children}
                    </Upload>
                     <Modal
                       visible={previewVisible}
                       footer={null}
                       onCancel={this.handleCancel}
                       title="图片预览"
                       wrapClassName="vertical-center-modal vertical-picture-modal"
                     >
                         <img alt="example" style={{ width: '100%' }} src={previewImage} />
                     </Modal>
            </div>
    }

    _beforeUpload(file, fileList){
        let type = file.type;
        if("image/jpg, image/jpeg, image/png".indexOf(type) == -1){
            ModalTip.errorTip("图片格式仅支持jpg、jpeg、png");
            return false;
        }

        let size = file.size;
        if((size/1024) > maxSize){
            ModalTip.errorTip("文件大小超过限制，最大可上传20M的图片！");
            return false;
        }
        return true;
    }
    _onError(err){
        ModalTip.errorTip("系统异常，请稍后再试！");
    }
    _onSuccess=(res)=>{
        if(res.result == 'ok'){
            if(this.props.success){
                let fileList = this.props.fileList||Immutable.List();
                fileList = fileList.push(Immutable.fromJS({
                    uid: new Date().getTime(),
                    url: res.data}));
                this.props.success(fileList);
            }
        }else{
            ModalTip.errorTip(res.msg);
        }

    }

    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }

    handleCancel = () => this.setState({ previewVisible: false })

    _onRemove = (file) => {
        let files = this.props.fileList;

        this.props.success( files.filter((item)=>{
            return item.get('uid') != file.uid
        }));
    }
}